<template>
    <title-box title="发电概况">
        <ul class="x-target-list columns-3">
            <li>
                <h4 class="x-target-title">当日发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(props.dp) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">本月发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(electricity.totalMonthElectricity) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">当年发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(electricity.totalYearElectricity) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">累计发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(props.cp) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">功率</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(props.p) }}</span>
                    <sub>KW</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">装机容量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(props.capacity) }}</span>
                    <sub>KW</sub>
                </div>
            </li>
        </ul>
    </title-box>
</template>
<script setup>
import { computed, reactive, watch } from 'vue'
import TitleBox from '/@/components/TitleBox/index.vue'
import { getElectricity } from '/@/api/Inverter/Devices/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
const props = defineProps({
    devicesId: {
        type: Number
    },
    dp: {
        type: Number
    },
    cp: {
        type: Number
    },
    p: {
        type: Number
    },
    capacity: {
        type: Number
    }
})

const electricity = reactive({
    totalMonthElectricity: null,
    totalYearElectricity: null
})

const toFixed = computed(() => {
    return power => {
        return power ? power.toFixed(2) : '0.00'
    }
})

const getDevicesElectricity = () => {
    if (props.devicesId) {
        getElectricity({ devicesId: props.devicesId }).then(result => {
            if (result.code === SUCCESS_CODE) {
                electricity.totalYearElectricity = result.data.totalYearElectricity
                electricity.totalMonthElectricity = result.data.totalMonthElectricity
            }
        })
    }
}

watch(
    () => props.stationId,
    () => {
        getDevicesElectricity()
    }
)

getDevicesElectricity()
</script>
